<template>
  <div class="search-detail">
    <nav class="nav" @click.stop="changeNav">
      <div :class="{ active: active == 0 }">菜谱</div>
      <div :class="{ active: active == 1 }">笔记</div>
      <div :class="{ active: active == 2 }">用户</div>
      <div :class="{ active: active == 3 }">商品</div>
      <div :class="{ active: active == 4 }">课堂</div>
    </nav>
    <section class="content" title="搜索内容" v-if="active == 0 && allInfo">
      <div class="order">
        <div class="left">
          <div :class="{ active: order == 0 }" @click.stop="order = 0">
            综合
          </div>
          <div :class="{ active: order == 2 }" @click.stop="order = 2">
            收藏高
          </div>
          <div :class="{ active: order == 3 }" @click.stop="order = 3">
            学做多
          </div>
        </div>
        <div class="right">
          <div>视频</div>
          <div>食材百科</div>
        </div>
      </div>
      <div class="content-tags" v-if="allInfo?.secondary_keywords?.length">
        <div>
          <div
            @click.stop="setNowIndex(tag, index)"
            :class="{ active: index == nowIndex }"
            v-for="(tag, index) in allInfo.secondary_keywords"
            :key="index"
          >
            {{ tag }}
          </div>
        </div>
      </div>
      <div class="content-list">
        <RecpieSearchItem
          v-for="(item, index) in allInfo.list"
          :key="item.r.id + '' + index"
          :item="item.r"
        />
      </div>
    </section>
    <section class="content" v-else-if="active == 1 && noteList">
      <NoteSearch :noteList="noteList" />
    </section>
    <section
      class="content"
      v-else-if="active == 2 && userList"
      @scroll="scrollEvent"
    >
      <div ref="usercontent">
        <UserSearch :userList="userList" />
        <div class="center"><van-loading /></div>
      </div>
    </section>
  </div>
</template>

<script>
import qs from "qs";
import RecpieSearchItem from "@/components/search/RecpieSearchItem.vue";
import NoteSearch from "@/components/search/NoteSearch.vue";
import UserSearch from "@/components/search/UserSearch.vue";
export default {
  props: ["kw"],
  components: {
    RecpieSearchItem,
    NoteSearch,
    UserSearch,
  },
  data: () => {
    return {
      active: 0,
      nowIndex: 0,
      allInfo: null,
      keyword: "",
      order: 0,
      secondary_keyword: "",
      whatTab: 0,
      noteList: null,
      userList: null,
      userListOffset: 0,
      userTime: null,
    };
  },
  watch: {
    kw: {
      handler(keyword) {
        this.keyword = keyword;
        console.log(this.active);
        if(this.active==0){
          this.getAllInfo();
        }else if(this.active==1){
          this.getNoteList();
        }else if(this.active==2){
          this.getUserList();
        }
        console.log(keyword);
      },
    },
    order() {
      this.getAllInfo();
    },
    secondary_keyword() {
      this.getAllInfo();
    },
  },
  methods: {
    scrollEvent(e) {
      clearTimeout(this.userTime);
      this.userTime = setTimeout(() => {
        let content = getComputedStyle(this.$refs.usercontent);
        console.log(e.target.scrollTop, Number.parseInt(content.height));
        if (
          Number.parseInt(content.height) -
            e.target.clientHeight -
            e.target.scrollTop <
          100
        ) {
          this.userListOffset += 10;
          this.getUserList();
        }
      }, 1000);
    },
    changeNav(e) {
      if (/nav/gi.test(e.target.classList.toString())) return;
      switch (e.target.textContent) {
        case "菜谱":
          this.active = 0;
          this.whatTab = "";
          break;
        case "笔记":
          this.active = 1;
          this.getNoteList();
          break;
        case "用户":
          this.active = 2;
          this.getUserList();
          break;
        case "商品":
          this.active = 3;
          break;
        case "课堂":
          this.active = 4;
          break;
      }
    },
    //追加关键字搜索
    setNowIndex(tag, index) {
      this.nowIndex = index;
      this.secondary_keyword = tag == "全部" ? "" : tag;
    },
    //搜索菜谱
    getAllInfo() {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/recipe/v2/search/0/20`,
        data: qs.stringify({
          keyword: this.keyword,
          secondary_keyword: this.secondary_keyword,
          order: this.order,
        }),
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        this.allInfo = res.data.result;
        console.log(this.allInfo);
      });
    },
    //搜索笔记
    getNoteList() {
      console.log("noteList");
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/note/search/0/20`,
        data: qs.stringify({
          keyword: this.keyword,
          type: 0,
        }),
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        console.log(res);
        this.noteList = res.data.result.list;
      });
    },
    //搜索用户
    getUserList() {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/user/v2/search/${this.userListOffset}/10`,
        data: qs.stringify({
          keyword: this.keyword,
        }),
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        console.log(res);
        if (!this.userList) {
          this.userList = [];
        }
        this.userList = [...this.userList, ...res.data.result.users];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.center{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.1rem;
}
.search-detail {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  box-sizing: border-box;
  padding: 0.05rem;
  color: var(--text-gray);
  .nav {
    width: 100%;
    height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem;
    box-sizing: border-box;
    > div {
      position: relative;
      flex: 1;
      font-size: 0.15rem;
      line-height: 0.4rem;
      text-align: center;
      color: var(--text-gray);
      transition: 0.3s;
      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        width: 50%;
        height: 0.04rem;
        border-radius: 0.01rem;
        background-color: transparent;
        transition: 0.3s;
      }
    }
    .active {
      font-weight: bold;
      color: var(--text-black);
      &::after {
        background-color: var(--bgc-yellow);
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100vh - 0.95rem);
    padding-bottom: 0.5rem;
    box-sizing: border-box;
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .order {
      width: 100%;
      height: 0.4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 0.05rem;
      > div {
        display: flex;
        align-items: center;
      }
      .left {
        > div {
          margin-right: 0.05rem;
          transition: 0.3s;
        }
        .active {
          font-weight: bold;
          color: var(--text-black);
        }
      }
      .right {
        > div {
          margin-left: 0.05rem;
        }
      }
    }
    .content-tags {
      width: 100%;
      height: 0.4rem;
      overflow: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      > div {
        width: max-content;
        height: 100%;
        display: flex;
        align-items: center;
        > div {
          height: 0.2rem;
          padding: 0.05rem 0.1rem;
          margin-right: 0.05rem;
          transition: 0.3s;
          border-radius: 0.15rem;
        }
        .active {
          font-weight: bold;
          color: var(--text-black);
          background-color: var(--text-icon-yellow);
        }
      }
    }
    .content-list {
      padding: 0.1rem 0;
    }
  }
}
</style>